<template>
  <ElDropdown class="h-[var(--sidebar-height)] custom-hover p-2" trigger="click">
    <div class="flex items-center">
      <img src="@/assets/images/avatar.png" alt="" class="w24px h24px rounded-[50%]" />
      <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">{{ userStore.name }}</span>
    </div>
    <template #dropdown>
      <ElDropdownItem>
        <div @click="logout">注销退出</div>
      </ElDropdownItem>
    </template>
  </ElDropdown>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const logout = () => {
  ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await userStore.userLogout()
    router.push(`/login?redirect=${route.fullPath}`)
    ElMessage.success('退出登录成功！')
  })
}
</script>

<style lang="scss" scoped></style>
